<template>
	<view>
		<nt-container v-model="scrollHeight">			
			<view class="check-tabs">
				<view class="check-tabs__item" :class="{ active: params.is_review === 0 }" @tap="changeType(0)">待审核</view>
				<view class="check-tabs__item" :class="{ active: params.is_review === 1 }" @tap="changeType(1)">已审核</view>
				<view class="check-tabs__item" :class="{ active: params.is_review === 2 }" @tap="changeType(2)">取消</view>
			</view>
			<view style="background-color: #fff;padding: 20rpx 20rpx;margin: 20rpx 0;">			
				<view class="search-input">
					<u-search placeholder="请输入关键词" v-model="params.keywords" shape="square" @search="search" @custom="search"></u-search>
				</view>
			</view>		
			
			<u-list
				@scrolltolower="getList"
				@refresherrefresh="refresherrefresh"
				enableBackToTop
				refresher-enabled
				:refresher-triggered="isPull"
				refresher-background="#F2F4F6"
				refresher-threshold="50"
				height="100%"
			>
				
				<view class="item" v-for="(it,listIndex) in listData" :key="listIndex">
					<view class="item-body">
						<view class="itemLine" style="border-bottom: 1px solid #ddd;padding-bottom: 20rpx;">
							<view>
								<text class="wmText1">师傅： </text><text class="wmText2">{{it.username}}</text>
							</view>
							<view>
								<text class="wmText2">{{it.create_date}}</text>
							</view>
						</view>
						
						<view class="itemLine" v-for="(it2,idx) in it.parts_json" :key="idx" style="border-bottom: 1px solid #ddd;padding: 5px 0;">
							<view>
								<text class="wmText1">配件： </text><text class="wmText2">{{it2.parts_name}}</text>
							</view>
							<view>
								<text class="wmText1">数量： </text><text class="wmText2 fcF00">{{it2.number}}</text>
							</view>
						</view>
						
						<view class="itemLine" style="padding-top: 5px;">
							<view>
								<text class="wmText1">备注： </text><text class="wmText2">{{it.remarks}}</text>
							</view>
						</view>
						<view class="itemLine" style="padding-top: 5px;">
							<view>
								<text class="wmText1">状态： </text><text class="wmText2 fcF00">{{it.review_text}}</text>
							</view>
							<view v-if="it.is_review != 0">
								<text class="wmText1">审核时间： </text><text class="wmText2">{{it.review_date}}</text>
							</view>
						</view>
						<view class="itemLine wmFooterButWarp" style="padding-top: 20rpx;">
							<nt-button text="修改" @click="funEdit(it)" v-if="it.is_review==0" ></nt-button>
							<view class="h_btn" @click.stop="funDel(it)">删除</view>							
						</view>
					</view>
				</view>
			</u-list>
			
		</nt-container>
		<view class="add" @tap="toAdd">
			<text class="iconfont">&#xeca0;</text>
			添加
		</view>
	</view>
</template>

<script>
	import { getTestPartsApplyLogList, delPartsApply } from "@/api"

	export default {
		data() {
			return {
				scrollHeight: 0,
				params:{keywords:'',is_review:0},
				isNext: true,
				loading: false,
				listData:[],
				urlEnum:{
					'add':'/subpackage/storehouse/pages/worker/partsapply/apply'
				},
				isPull:true,
			}
		},
		created(){
		},
		onLoad(options){
			this.init()
		},
		// 返回刷新
		onShow(){
			this.init()
		},
		methods: {
			funEdit(it){
				let url = this.urlEnum['add']+'?id='+it.id;
				this.nav(url)
			},
			toAdd(){
				let url = this.urlEnum['add'];
				this.nav(url)
			},
			funDel(it){
				let that = this
				uni.showModal({
					content:'确认删除这条记录？',
					success: function (res) {
						if (res.confirm) {
							delPartsApply({id:it.id}).then(res => {
								let code = res.code
								if(code !== 1) return;
								that.toast("删除成功")
								setTimeout(function(){
									that.getList()
								},1000)
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				})
				
			},
			refresherrefresh(){
				this.init()
			},
			changeType(type){
				this.params.is_review = type
				this.getList()
			},
			search(){
				this.getList()
			},
			getList(){
				if(this.loading || !this.isNext) return;
				this.loading = true
				getTestPartsApplyLogList(this.params).then(res => {
					this.isPull = false
					console.log(this.isPull)
					const { code, data } = res
					if(code === 1){
						this.listData = data.data;
					}
				}).finally(() => {
					this.loading = false
					setTimeout(() => {
						this.isPull = false
					}, 500)
				})
			},
			init(){
				this.isPull = true
				this.getList()
			},
		}
	}
</script>

<style lang="scss" scoped>
.add{
	width: 100rpx;
	height: 100rpx;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.3);
	display:flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	font-size: 26rpx;
	color:#666;
	position: fixed;
	right: 20rpx;
	bottom: 160rpx;
	padding: 10rpx;
	box-sizing: border-box;
	.iconfont{
		transform: rotate(45deg);
		margin-bottom:4rpx;
		font-size:28rpx;
	}
}
.item{padding: 30rpx;background-color: #fff;margin-bottom: 30rpx;}
.wmText1{color: #666;}
.wmText2{}
.fcF00{color:#f00}
.itemLine{display: flex;flex-wrap: wrap;justify-content: space-between;}
.h_btn{color: white;
    background-color: #f00;
    border-color: #f00;
    border-width: 1px;
    border-style: solid;height: 40px;
    font-weight: bold;border-radius: 3px;padding: 0 12px;
    font-size: 30rpx;line-height: 40px;}
.check-tabs{
	display:flex;
	align-items: center;
	justify-content: space-between;
	height: 90rpx;
	margin: 20rpx;
	background:#fff;
	&__item{
		flex: 1;
		text-align: center;
		color:#666;
		position: relative;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 30rpx;
		&.active{
			background: var(--theme-color);
			color:#fff;
		}
		&::before{
			content: '';
			display: block;
			position: absolute;
			top: 0;
			bottom:0;
			left: 0;
			width:1rpx;
			background:#f5f5f5
		}
	}
}
</style>
